<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>移动选项</title>
    <script>
        function  move(l,r){
            let l1 = document.getElementById(l);
            let r1   = document.getElementById(r);
            let length = l1.options.length;
            for (let i = length-1; i >=0; i--) {
                if(l1.options[i].selected)
                r1.appendChild(l1.options[i]);
            }

        }
        function moveAll(l, r) {
            let l1 = document.getElementById(l);
            let r1 = document.getElementById(r);
            let length = l1.options.length;
            for (let i = 0; i < length; i++) {
                r1.appendChild(l1.options[0]);
            }
        }
    </script>
</head>
<body>
<table>
    <tr>
        <td>
            <select id="s1" multiple style="width: 100px;height: 120px;">
                <option value="1">admin</option>
                <option value="2">alice</option>
                <option value="3">jack</option>
                <option value="4">lucy</option>
                <option value="5">tom</option>
            </select>
        </td>
        <td>
            <input type="button" value="&nbsp;-->" onclick="move('s1','s2')"><br>
            <input type="button" value="->>" onclick="moveAll('s1','s2')"><br>
            <input type="button" value="<--&nbsp;" onclick="move('s2','s1')"><br>
            <input type="button" value="<<-" onclick="moveAll('s2','s1')"><br>
        </td>
        <td>
            <select id="s2" multiple style="width: 100px;height: 120px;">

            </select>
        </td>
    </tr>
</table>
</body>
</html>